<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>


  <ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
    <li>DDD</li>
    <li>EEE</li>
    <li>FFF</li>
    <li>GGG</li>
  </ul>
  
 
  <div class="lunar"></div>

  <div class="rect"></div>
  <div class="circle"></div>


  <!-- 
注意：标签的位置按照传统的做法，是将标签放在head标签下。但是这意味着必须等到全部js代码被下载、解析和执行完成以后才开始呈现页面内容（ 因为浏览器在遇到body标签时才开始呈现页面内容），
这对于js代码很多的页面来说，无疑会造成页面显示的明显延迟，延迟期间页面一片空白。所以为了避免这个问题，我们规定将所有的JavaScript代码放在<body>元素中页面内容的后面。
  如：
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div>这里是页面内容，最后放JavaScript代码</div>
	<script type="text/javascript" src="example.js"></script>
</body>
</html>
 -->
      <!-- <script src="/bundle.js">
  </script> -->

<div class="logo"></div>
</body>

</html>